<template>
  <div class="example-basic">
    <el-time-picker v-model="internalValue" :style="{ width: `${width}`,height:`${height}` 
     }" :placeholder="placeholder" @change="change" :disabled-hours="disabledHours" :disabled-minutes="disabledMinutes"
      :disabled-seconds="disabledSeconds" />
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import dayjs from "dayjs"
  const emits = defineEmits(["update:modelValue", "change"]);
  const props = defineProps({
    modelValue: {
      type: String,
      default: "",
    },
    width: {
      type: String,
      default: "240px",
    },
    height: {
      type: String,
      default: "36px"
    },
    placeholder: {
      type: String,
      default: '请选择时间'
    },
    disabledTime: {
      type: String,
      default: '00:00:00'
    }

  });
  let internalValue = computed({
    get() {
      return props.modelValue;
    },
    set(val) {
      emits("update:modelValue", val);
    },
  });
  const makeRange = (start: number, end: number) => {
    const result: number[] = []
    for (let i = start; i <= end; i++) {
      result.push(i)
    }
    return result
  }

  const disabledHours = () => {
    const [hours, minutes, seconds] = props.disabledTime.split(':').map(num => parseInt(num, 10));
    console.log(hours);

    return makeRange(0, hours - 1)
  }
  const disabledMinutes = (hour: number) => {

    const [hours, minutes, seconds] = props.disabledTime.split(':').map(num => parseInt(num, 10));
    if (hour == hours) {
      return makeRange(0, minutes - 1)
    } else {
      return ''
    }
  }
  const disabledSeconds = (hour: number, minute: number) => {
    const [hours, minutes, seconds] = props.disabledTime.split(':').map(num => parseInt(num, 10));
    if (minute == minutes && hours == hour) {
      return makeRange(0, seconds)
    } else {
      return ''
    }
  }
  const change = () => {
    console.log(123);

    emits('change')
  }
</script>

<style lang="scss" scoped>
  ::v-deep .el-input__wrapper {
    height: 36px !important;
    padding: 1px 16px !important;
  }

  .example-basic .el-date-editor {
    margin: 8px;
  }
</style>